<template>
<div id="app">
  <router-view />
  <!-- <transition name="router-move">
    <router-view />
  </transition> -->

  <cube-tab-bar v-model="selectLabel" :data="tabs" @change="changeHandler" show-slider>
    <cube-tab v-for="(item,index) in tabs" :key="index" :icon="item.icon" :label="item.value">
       <span>{{item.label}}</span>
       <span class="badge" v-if="item.label=='Cart'">{{cartTotal}}</span>
    </cube-tab>
  </cube-tab-bar>

</div>
</template>
<script>

import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      selectLabel: '/',
      tabs: [
        {
          label: 'Home',
          value: '/',
          icon: 'cubeic-home'
        },
        {
          label: 'Cart',
          value: '/cart',
          icon: 'cubeic-mall'
        },
        {
          label: 'Me',
          value: '/login',
          icon: 'cubeic-person'
        }
      ]
    }
  },
  computed: {
    ...mapGetters({
      cartTotal: 'cartTotal'
    }),
    isLogin () {
      return !!this.$store.state.token
      // !!是转换成布尔值
    }
  },
  methods: {
    logout () {
      this.$axios.get('/api/logout')
    },
    changeHandler (val) {
      this.$router.push(val)
    }
  },
  async created () {
    this.selectLabel = this.$route.path
    const token = localStorage.getItem('token')
    if (token) {
      this.$store.commit('settoken', token)
    }
  }
}
</script>
<style lang="stylus">
#app
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  padding-bottom 40px

.nav
  padding: 30px;
  a
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active
      color: #42b983;

.router-move-enter,.router-move-leave-active
  transform  translate(100%,0)
.router-move-enter-active,.router-move-leave-active
  transition transform 0.3s
.badge
  display inline-block
  background #f00
  color white
  padding 5px
  border-radius 50%
  font-size 12px

.cube-tab-bar
  position fixed
  bottom 0
  left 0
  right 0
  background-color #eee
  height 40px
  overflow hidden
</style>
